<template>
    <div class='app-container'>
        <div class="app-box helptextCon">
            <div class="navlists">
                <div v-for="(item,indexout) in navlist">
                    <p>
                        {{item.title}}
                    </p>
                    <span v-for="(val,index) in item.arrs" @click="go(indexout,index)">{{val}}</span>
                </div>
            </div>
            <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">-->
            <!-- 保单管理 -->
            <!-- <el-tab-pane label="保单管理" name="first">-->
    <div class="helptext">
        <h3>保单管理（分为两个模块）</h3>
        <p class="helptext_ti" ref="nans">1、保单查询</p>
        <p>可查询本机构下登记的保单信息，通过“时间”、“保险公司”、“车牌号”、"保单号”、“投保单号”等保单或车辆信息进行搜索， 页面以车辆为纬度展示保单的基本信息。</p>
        <p><img src="../../assets/helpImg/baodan1.png" alt=""></p>
        <p>点击操作列的“详情”链接，查看保单详细信息，包括：“保单信息”、“车辆信息”、“保单关系人”、“保单明细”、“扩展信息”、“代理信息”、“手续费信息”、“结算信息”、“备注信息”、“日志记录”等。</p>
        <p>可以根据需要修改“业务归属”、“交商同保”信息，并添加“备注”信息。</p>
        <p><img src="../../assets/helpImg/baodan2.png" alt=""></p>

        <p class="helptext_ti" ref="nans">2、保单登记</p>
        <p>保单登记：用于将保单信息登记到智保客系统中，我们提供三个登记方式：手工登记（按保单号登记）、excel表格导入、出单中心自动登记。</p>
        <p>①保单较少时可以通过“按保单号登记”页面进行操作，选择和填写“保险公司”、“工号”、“组织机构”、“业务归属”、“保单号”。填写完毕之后点击下方 “确定”按钮进行保存。多条保单时，每行一个。</p>
        <p><img src="../../assets/helpImg/baodan3.png" alt=""></p>
        <p>②保单登记较多时，可以通过“excel表格导入”页面进行批量上传（只能上传xlsx、xls文件），右侧点击“下载模板”填写完成之后在页面“点击上传”即可，然后点击确定。</p>
        <p><img src="../../assets/helpImg/baodan4.png" alt=""></p>
        <p>模板格式如图所示：</p>
        <p><img src="../../assets/helpImg/baodan5.png" alt=""></p>
        <p>③保单登记后，系统将自动从主体公司后台同步保单的全部信息。可通过“保单导入历史”页面，查看保单同步进度。可以通过“时间范围”、“保险公司”、“工号”、“业务归属”、“类型”、“状态”进行搜索。</p>
        <p><img src="../../assets/helpImg/baodan6.png" alt=""></p>
        <p>在改列表中“状态”分为三种“成功”、“失败”、“处理中”，保单同步成功后，就可以在“保单查询”中查到。</p>
    </div>
    <!--</el-tab-pane>
                <el-tab-pane label="政策管理" name="second">-->
    <div class="helptext">
        <h3>政策管理（分为五个模块）</h3>
        <p class="helptext_ti" ref="nans">1、创建上游政策</p>
        <p>点击”创建上游政策“，进入创建上游批次的页面，如下图所示：</p>
        <p><img src="../../assets/helpImg/zhengce1.png" alt=""></p>
        <p>选择填写“保险公司”、“批次名称”、“适用工号”、“有效时间”（如果与之前政策的有效时间重复，会进行提示验证）、“是否奖励批次”（不选择为基础政策，选择之后为奖励批次）、“选择模板”（如果选择历史批次作为模板，确定之后会把之前模板中的条件和比例带出，只需修改即可，如果选择空白模板，则需要新建政策条件和比例。）。</p>
        <p>选择空白模板点击确定之后进入政策编辑页面：</p>
        <p><img src="../../assets/helpImg/zhengce2.png" alt=""></p>
        <p>该页面左上角为政策的详细信息，右上角是“返回”和“编辑批次信息”点开如下图：</p>
        <p><img src="../../assets/helpImg/zhengce3.png" alt=""></p>
        <p>该页面可进行政策信息的修改。</p>
        <p>点击页面右下角“新建政策”打开“政策新建”页面，根据政策信息选择“车辆条件”、“承保条件”以及“佣金设置”以及最下方的“政策描述”选择填写之后，点击右下角“保存”牛进行保存。</p>
        <p>保存之后如下图所示：</p>
        <p><img src="../../assets/helpImg/zhengce4.png" alt=""></p>
        <p>“佣金”和“奖励”可以在页面进行修改，修改之后弹出“取消”、“保存”的悬浮窗</p>
        <p><img src="../../assets/helpImg/zhengce5.png" alt=""></p>
        <p>如果修改的条目较多可以选择点击下方“批量保存”按钮。</p>
        <p>在右侧有三个选项分别为“编辑”、“复制”、“删除”。</p>
        <ul>
            <li>“编辑”会跳转的“政策编辑”页面，可以进行修改。</li>
            <li>“复制”为复制一条与第一条内容一致的数据，可针对修改之后保存。</li>
            <li>“删除”就是删除该条政策。</li>
        </ul>
        <p>如果填写无误可点击下方的“提交审核”等待审核，下方“删除”按钮，是为删除整个上游政策。</p>

        <p class="helptext_ti" ref="nans">2、创建下游政策</p>
        <p>该页面是“创建下游批次页面”，同样选择和填写红色带星号的必填项</p>
        <p><img src="../../assets/helpImg/zhengce6.png" alt=""></p>
        <p>其中“模板类型”如果选择“上游批次作为模板”（前提是该保险公司对应的上游政策已经审批完成）“选择模板”下拉列表选择对应的上游政策，会按照上游政策模板里的信息自动带出包括“适用工号”和“有效时间”，只需要针对修改即可。</p>
        <p>选择“历史批次作为模板”，“选择模板”下拉列表选择往期下游政策作为模板，与上游政策类似，会把信息自动带出，针对修改即可。</p>
        <p>“空白模板”则需要新建政策条件和比例，如下图所示：</p>
        <p><img src="../../assets/helpImg/zhengce7.png" alt=""></p>
        <p>点击“新建政策”进入到“政策新建”页面其中“车辆条件”和“承保条件”与上游一致，在“佣金设置”多了一个按钮“添加子机构政策”（一般设置的下游通用政策，指的是所有的下属机构通用政策，但是会有某些地区下游政策与通用不一致）</p>
        <p><img src="../../assets/helpImg/zhengce8.png" alt=""></p>
        <p>点击“添加子机构政策”弹出页面：</p>
        <p><img src="../../assets/helpImg/zhengce9.png" alt=""></p>
        <p>选择子机构并填写“佣金”、“奖励”比例。点击“确定”会在“通用”下方显示该子机构单独的下游政策。在右侧有“编辑”和“删除”两个按钮。</p>
        <p><img src="../../assets/helpImg/zhengce10.png" alt=""></p>
        <p>保存之后在在下游政策批次编辑页面显示如下图：</p>
        <p><img src="../../assets/helpImg/zhengce11.png" alt=""></p>
        <p>在该页面创建单独的子机构下游政策则需要吧鼠标移动到“通用”处，点击通用后方的“+”号进行设置</p>
        <p><img class="mini" src="../../assets/helpImg/zhengce12.png" alt=""></p>
        <p>如果某一子机构所有的都与通用政策不一致，则需要点击“批量添加子机构”按钮进行批量添加。点击之后如下图</p>
        <p><img class="middle" src="../../assets/helpImg/zhengce13.png" alt=""></p>
        <p>该页面只有一个子机构的选项，选择之后会在所有下游通用政策下方单独创建选中的子机构，“佣金”和“奖励”与通用政策保持一致，只需修改即可。</p>
        <p><img src="../../assets/helpImg/zhengce14.png" alt=""></p>
        <p>单独删除该条子机构政策需要鼠标移到改子机构名称处点击删除图标即可完成删除。</p>
        <p><img class="mini" src="../../assets/helpImg/zhengce15.png" alt=""></p>
        <p>或者进入到政策编辑的详情页面进行删除。</p>
        <p>填写完成之后“提交审批”。</p>

        <p class="helptext_ti" ref="nans">3、上游政策列表</p>
        <p>该模块显示的是所有包括生效中、编辑中和待审批的上游政策，可以通过“保险公司”、“适用工号”、“政策类型”以及“批次名称”进行搜索。</p>
        <p><img src="../../assets/helpImg/zhengce16.png" alt=""></p>
        <p>值得注意的是列表中有一列“批次状态”，分为五种状态。</p>
        <ul>
            <li>①“生效中”（完成审核，有效时间包含当前时间）<br>右侧按钮为“生成下游政策”（点击之后跳转到创建下游政策页面）和“申请编辑”（点击之后状态变为‘编辑中’）</li>
            <li>②“编辑中”（处于编辑状态，并没有提交审核）<br>右侧按钮为“编辑”、“删除”、“提交审核”</li>
            <li>③“待审批”<br>右侧按钮为“申请编辑”</li>
            <li>④“已过期”（已经审核通过，但是有效时间已经过时）<br>右侧按钮为“生成下游政策”和“申请编辑”</li>
            <li>⑤“等待生效”（有效时间还没到）<br>右侧按钮为“生成下游政策”和“申请编辑”</li>
        </ul>

        <p class="helptext_ti" ref="nans">4、下游政策列表</p>
        <p>整体与上游政策列表一致，缺少一个“生成下游政策”按钮。</p>

        <p class="helptext_ti" ref="nans">5、政策审批</p>
        <p>该页面显示的是所有处于“待审批”状态的数据，可以通过“保险公司”进行筛选。</p>
        <p><img src="../../assets/helpImg/zhengce17.png" alt=""></p>
        <p>审核需要点击右侧“查看详情”</p>
    </div>
    <!-- </el-tab-pane>-->

    <!--<el-tab-pane label="财务结算" name="third">-->
    <div class="helptext">
        <h3>财务结算（分为三个模块）</h3>
        <p class="helptext_ti" ref="nans">1、上游结算</p>
        <p>打开该页面分为三步</p>
        <p>①导入文件：</p>
        <p><img src="../../assets/helpImg/jiesuan1.png" alt=""></p>
        <p>需要选择“保险公司”并且“配置模板”</p>
        <p><img src="../../assets/helpImg/jiesuan2.png" alt=""></p>
        <p>根据导入的excel文件进行设置，然后选择“结算周期”、“结算备注”、“导入文件”</p>

        <p class="helptext_ti" ref="nans">2、下游结算</p>
        <p class="helptext_ti" ref="nans">3、结算明细</p>
    </div>
    <!--</el-tab-pane>-->
    <!-- <el-tab-pane label="系统设置" name="fourth">-->

    <div class="helptext">
        <h3>佣金管理（分为四个模块）</h3>
        <p class="helptext_ti" ref="nans">1、佣金概述</p>
        <p>是对佣金部分的一个整体参数的提现的地方。可以查看企业账户余额和未提现余额。以及对用户和提现打款总数的汇总。同时，可以进行一些设置。</p>
        <p><img src="../../assets/helpImg/yongjin1.png" alt=""></p>
        <p>在体现企业账户余额的地方，提供了充值的操作。</p>
        <p><img src="../../assets/helpImg/yongjin.png" alt=""></p>
        <p>完成对应的操作。实现企业账户余额的充值。</p>
        <p>用户协议，可以对用户注册时的协议进行定义和修改。</p>
        <p><img src="../../assets/helpImg/yongjin2.png" alt=""></p>
        <p>支付密码，设置了支付密码，才可以实现入金和佣金发放。</p>
        <p><img src="../../assets/helpImg/yongjin3.png" alt=""></p>
        <p>扣税设置，可以查看扣除个人所得税的相关设置。</p>
        <p><img src="../../assets/helpImg/yongjin4.png" alt=""></p>

        <p class="helptext_ti" ref="nans">2、企业账单</p>
        <p>企业账单有三个列表页，都是对有关入金佣金发放操作的记录。可以通过时间和相关信息查询。</p>
        <p>佣金发放明细</p>
        <p><img src="../../assets/helpImg/yongjin5.png" alt=""></p>
        <p>企业账单明细</p>
        <p><img src="../../assets/helpImg/yongjin6.png" alt=""></p>
        <p>出金明细</p>
        <p><img src="../../assets/helpImg/yongjin7.png" alt=""></p>
        <p>佣金发放明细，点击详情，可以查看该条记录的详情信息。</p>
        <p><img src="../../assets/helpImg/yongjin8.png" alt=""></p>

        <p class="helptext_ti" ref="nans">3、佣金发放</p>
        <p>这里是可以对人员进行佣金发放，可以单人发放，也可以批量发放。</p>
        <p>这里通过输入精确的姓名或手机号，进行查询，然后添加。</p>
        <p><img src="../../assets/helpImg/yongjin9.png" alt=""></p>
        <p>这里是针对历史转账，进行人员的批量添加。</p>
        <p><img src="../../assets/helpImg/yongjin10.png" alt=""></p>
        <p>添加后如下图，可以对人员进行佣金发放。或者移除人员。</p>
        <p><img src="../../assets/helpImg/yongjin11.png" alt=""></p>
        <p>发放后进行密码和验证码输入，确认发放。</p>
        <p><img src="../../assets/helpImg/yongjin12.png" alt=""></p>
        <p>发放后记录在企业账单提现。</p>

        <p class="helptext_ti" ref="nans">4、用户信息</p>
        <p>这里是所有的注册用户的信息汇总。包括姓名、手机号、身份证号、银行卡号和信息、状态、余额等。</p>
        <p>可以根据手机号、姓名、身份证号进行查询。</p>
        <p><img src="../../assets/helpImg/yongjin13.png" alt=""></p>
        <p>点击转账操作，进入佣金发放模块。点击详情，进入该用户下的详情。可以看用户的信息和对余额的操作记录。</p>
        <p><img src="../../assets/helpImg/yongjin14.png" alt=""></p>
    </div>

    <div class="helptext">
        <h3>统计报表（分为五个模块）</h3>
        <p class="helptext_ti" ref="nans">1、报表总览</p>
        <p>报表总览分为三个大块，分别为数据总览，线性（柱状图）总览，排行榜。</p>
        <p>数据总览中分为八小块，分别为：</p>
        <ul>
            <li>①本月目标保费（定义：本月目标保费=（本年目标任务-本年已完成目标任务+本月已完成保费）/（剩余月数+1））</li>
            <li>②本月已完成保费（定义：本月1日到昨天所有保费之和，不包括车船税）</li>
            <li>③本年已完成保费（定义：本年的1月1日到昨天的所有保费之和，不包括车船税）</li>
            <li>④时间进度完成率（定义：时间进度完成率=已完成日任务/应完成日任务）</li>
            <li>⑤剩余日任务（定义：剩余日任务=（本年目标保费-本年已完成保费）/本年剩余天数）</li>
            <li>⑥应完成日任务（定义：应完成日任务=本年目标任务/365）</li>
            <li>⑦已完成日任务（定义：已完成日任务=本年已完成保费/本年已过天数）</li>
            <li>⑧日任务差额（定义：任务差额=应完成日任务-已完成日任务）</li>
        </ul>
        <p><img src="../../assets/helpImg/baobiao1.png" alt=""></p>
        <p>注：其中本月目标保费中“目标设定”按钮直接跳转到保单详情中的“目标设置页面”。</p>
        <p><img src="../../assets/helpImg/baobiao2.png" alt=""></p>
        <p>线性（柱状图）总览分为线性图和柱状图，可分为年和月份：</p>
        <p>年份默认为今年和去年，月份分为本月和上月</p>
        <p><img src="../../assets/helpImg/baobiao3.png" alt=""></p>
        <p><img src="../../assets/helpImg/baobiao4.png" alt=""></p>
        <p>排行榜分为保险公司排行榜和子机构排行榜，默认今年数据：</p>
        <p>保险公司排行榜更多跳转到保险公司月报表，</p>
        <p>子机构排行榜跳转到组织机构月报表。</p>
        <p><img src="../../assets/helpImg/baobiao5.png" alt=""></p>

        <p class="helptext_ti" ref="nans">2、日/月趋势报表</p>
        <p>日趋势排行榜默认显示本月至昨日的数据，月趋势排行榜默认显示本年数据。</p>
        <p>分别可搜索下级组织机构、保险公司以及保险类型。</p>
        <p><img src="../../assets/helpImg/baobiao6.png" alt=""></p>
        <p>其中月趋势报表点击日期会跳转到日趋势报表。</p>
        <p><img src="../../assets/helpImg/baobiao7.png" alt=""></p>

        <p class="helptext_ti" ref="nans">3、保险公司日/月报表</p>
        <p>日报表默认查询本月至昨日的数据，保险公司月报表默认显示本年数据。</p>
        <p>可查询条件为下级机构以及保险公司。</p>
        <p><img src="../../assets/helpImg/baobiao8.png" alt=""></p>
        <p>日报表红色部分为当前日期以及周几，黄色部分为保险公司，蓝色部分为具体哪天哪个公司的数据（“-”为暂无数据），绿色部分为合计数据</p>
        <p><img src="../../assets/helpImg/baobiao9.png" alt=""></p>
        <p>其中点击黄色部分会跳转到保险公司月报表</p>
        <p>点击具体数据会显示具体的保费信息</p>
        <p><img src="../../assets/helpImg/baobiao10.png" alt=""></p>
        <p>月报表红色部分为季度以及具体月份，黄色部分为保险公司，蓝色部分为具体哪天哪个公司的数据（“-”为暂无数据），绿色部分为合计数据</p>
        <p><img src="../../assets/helpImg/baobiao11.png" alt=""></p>
        <p>其中点击黄色部分会跳转到保险公司月报表</p>
        <p>点击具体数据会显示具体的保费信息</p>
        <p>点击查看更多会跳转到当月趋势日报表</p>
        <p><img src="../../assets/helpImg/baobiao12.png" alt=""></p>

        <p class="helptext_ti" ref="nans">4、组织机构日/月报表</p>
        <p>与第三点同理，参考第三点</p>

        <p class="helptext_ti" ref="nans">5、目标设置</p>
        <p>目标设置可设置某年目标，默认为今年</p>
        <p><img src="../../assets/helpImg/baobiao13.png" alt=""></p>
        <p>点击编辑可输入当前年份组织机构的目标保费</p>
        <p><img src="../../assets/helpImg/baobiao14.png" alt=""></p>
        <p>点击删除本年目标保费变为0，可重新设置</p>
        <p><img src="../../assets/helpImg/baobiao15.png" alt=""></p>
    </div>
    <div class="helptext">
        <h3>系统管理（分为六个模块）</h3>
        <p class="helptext_ti" ref="nans">1、机构管理</p>
        <p>该页面是公司管理组织机构包括创建和编辑子机构的功能页面。<br />打开之后显示总公司的整体信息和机构层次，如下图所示：</p>
        <p><img src="../../assets/helpImg/xitong1.png" alt=""></p>
        <p>组织机构目前可以创建4级，上图左侧机构在系统里面叫做管理团队，在第三级机构内还包含业务团队。<br />点击总公司右上角的“编辑”按钮，进入到“编辑组织信息”页面，可以进行组织信息的修改。</p>
        <p><img src="../../assets/helpImg/xitong2.png" alt=""></p>
        <p>总公司为一级机构，如果想创建2级机构，在一级机构右上角的“编辑”按钮点击下拉选项，选择“新建管理团队”，打开之后会弹出“新建组织机构”的页面。</p>
        <p><img src="../../assets/helpImg/xitong3.png" alt=""></p>
        <p>创建好之后在页面左侧，总公司下侧会出现该二级机构的名称，点击打开页面会显示二级机构的信息，同样在右上角可以进行“编辑”。
            <br />三级机构创建的方式类似，需要在二级机构页面的右上角点击“新建管理团队”进行新增，新增完毕之后会在二级机构下侧出现该团队名称，并且在二级机构左侧可以点击“+”，“-”进行展开和关闭。</p>
        <p><img src="../../assets/helpImg/xitong4.png" alt=""></p>
        <p>四级创建的方式与其他方式一致，但是名称为“新建业务团队”在该页面选项较二级机构和三级机构多。</p>
        <p><img src="../../assets/helpImg/xitong5.png" alt=""></p>
        <p>创建完成之后，点击打开三级机构页面的业务团队页面会出现该业务团队的基本信息，点击详情页面可以进行查看和编辑。</p>

        <p class="helptext_ti" ref="nans">2、角色管理</p>
        <p>在组织机构创建完成之后，需要涉及到增加人员，在增加人员之前要把公司的角色创建好（角色不是一个人，而是一种人员）角色对应的在该公司的权限。
            <br />操作方式是打开角色管理页面，在页面左侧是创建好的角色，右侧是该角色对应的权限。
        </p>
        <p><img src="../../assets/helpImg/xitong6.png" alt=""></p>

        <p class="helptext_ti" ref="nans">3、人员管理</p>
        <p>增加人员有两种方式，第一种打开相关机构的管理团队点击“直属人员”右侧的“新建人员”，会弹出“新建人员的信息”页面。</p>
        <p><img src="../../assets/helpImg/xitong7.png" alt=""></p>
        <p>第二种方式是打开“人员管理”页面，点击右上角的“新建人员”按钮，填写好“人员新建信息”保存，人员会直接分配到所选的“所属机构”中。在人员管理页面会显示所有人员的基本信息，可以进行修改密码和编辑操作，想寻找特定人员，可以在页面上方选择条件进行检索。</p>
        <p><img src="../../assets/helpImg/xitong8.png" alt=""></p>
        <p>创建完成之后人员会分配到所选的所属机构的“直属人员”列表中。可以进行右侧的“编辑”进行修改。</p>

        <p class="helptext_ti" ref="nans">4、出单工号</p>
        <p>该页面显示本公司出单工号的信息，可以通过保险公司进行检索，点击右上角“新建出单工号”弹出“出单工号编辑”页面，输入红色带星号的必填项，其他信息可选填，如下图所示：</p>
        <p><img src="../../assets/helpImg/xitong9.png" alt=""></p>
        <p>保存之后出单工号会分配到所选择的的管理团队中，可在机构管理—管理团队以及（业务团队）的出单工号中查询（可进行编辑操作）。</p>

        <p class="helptext_ti" ref="nans">5、公告管理</p>
        <p>该页面显示总公司下发的公告</p>
        <p><img src="../../assets/helpImg/xitong10.png" alt=""></p>
        <p>可以通过查询时间进行“检索”，点击右上角“新建公告”页面如下图：</p>
        <p><img src="../../assets/helpImg/xitong11.png" alt=""></p>
        <p>可以新建公告包括选择下发的机构。</p>

        <p class="helptext_ti" ref="nans">6、操作日志</p>
        <p>打开之后可以通过“操作时间”、“用户名”、“ip”进行“检索”。<br />该页面显示什么时间哪个用户登陆了系统等信息。</p>
        <p><img src="../../assets/helpImg/xitong12.png" alt=""></p>

    </div>
            <!--</el-tab-pane>
        </el-tabs>-->

            <div @click="backstops" class="backtopout">
            	<div class="backtop">
            		 <i class="iconfont icon-up"></i>
            	</div>
               
                <span>返回顶部</span>
            </div>
        </div>

    </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      navlist: []
    };
  },
  mounted() {
    var that = this;
    setTimeout(function() {
      //pane-first
      that.getnavs();
    }, 500);
  },
  computed: {},
  created() {},
  methods: {
    backstops() {
      window.scrollTo(0, 0);
    },
    go(oute, e) {
      console.log(e);
      let ids = "pane-" + this.activeName;
      let aa = document
        .getElementsByClassName("helptext")
        [oute].getElementsByClassName("helptext_ti")[e].offsetTop;
      window.scrollTo(0, aa + 50);
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.getnavs();
    },
    getnavs() {
      console.log(this.$refs);
      this.navlist = [];
      //let ids="pane-"+this.activeName
      let aa = document.getElementsByClassName("helptext"); //.getElementsByClassName('helptext_ti')
      console.log(111111111);
      console.log(aa);
      for (var i = 0; i < aa.length; i++) {
        let str = aa[i].getElementsByTagName("h3")[0].innerText;
        let indexs = str.indexOf("（");

        let strs = str.slice(0, indexs);

        let arr = [];
        for (
          var j = 0;
          j < aa[i].getElementsByClassName("helptext_ti").length;
          j++
        ) {
          arr.push(
            aa[i]
              .getElementsByClassName("helptext_ti")
              [j].innerText.slice(
                2,
                aa[i].getElementsByClassName("helptext_ti")[j].innerText.length
              )
          );
        }
        this.navlist.push({
          title: strs,
          arrs: arr
        });
      }
      console.log(this.navlist);
    }
  }
};
</script>
<style lang="scss" scoped>
.helptextCon {
  .el-tabs__content {
    background: #cff9fb2b;
  }
}
.helptext {
  padding: 0 30px;

  h3 {
    line-height: 1.5;
    font-weight: 400;
    margin: 20px 0 10px;
    color: #333;
    font-size: 22px;
    margin-top: 40px;
  }

  p {
    // width: 80%;
    margin: 15px 0;
    font-size: 14px;
    line-height: 26px;
    color: #34495e;
    img {
      max-width: 100%;
      height: auto;
    }
  }
  .helptext_ti {
    font-weight: 550;
    font-size: 16px;
    margin: 25px 0 17px;
  }
  ul {
    padding: 15px 0;
    background-color: #cef9e475;
    li {
      color: #34495e;
      font-size: 14px;
      line-height: 22px;
      margin: 5px 0 5px 20px;
      padding-left: 15px;
      position: relative;
      list-style: none;
    }
  }
}
.navlists {
  width: 100%;

  padding: 0 30px;
  z-index: 33;
  display: flex;
  div {
    flex: 1;
    height: 100%;
    p {
      font-size: 18px;
    }
    span {
      display: block;
      line-height: 25px;
      color: #00b7d3;
      cursor: pointer;
    }
  }
}
.backtopout{
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height:60px;
	text-align:center;
	cursor:pointer;
}
.backtop {
  width: 30px;
height:30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #666;
  border-radius: 50%;
  background: #eee;
	margin:0 auto 10px;
  color: black;
}
.backtop span{
	font-size:12px;
}
</style>